import React, {useEffect, useState} from "react";
import {Button, message, Modal, Popconfirm, Space, Table} from "antd";
import {ColumnsType} from "antd/es/table";
import {ExclamationCircleFilled} from "@ant-design/icons";
import {GroupCreateDrawer, GroupUpdateDrawer} from "@/pages/script/components";
import {DataNode} from "@/pages/script";
import {GroupOpenDrawerProp, ScriptGroupTableProp, ScriptTreeProp} from "@/pages/script/modules";
import {scriptGroupDelete, scriptGroupList} from "@/api/script";

export interface ServerGroupProp {
	id: number;
	item_type: number;
	key: string;
	title: string;
	desc: string;
	work_home: string;
	create_id: string;
	create_time: string;
}

interface ComponentProp {
	updateNode: (data: ScriptTreeProp) => void;
	deleteNode: (id: number | number[]) => void;
	insertNode: (data: ScriptTreeProp) => void;
}

const ScriptGroupTable: React.FC<ComponentProp> = ({deleteNode, insertNode, updateNode}) => {

	const columns: ColumnsType<ScriptGroupTableProp> = [
		{
			title: '分组名称',
			key: 'title',
			dataIndex: 'title',
			align: 'center',
		},
		{
			title: '工作路径',
			key: 'workHome',
			dataIndex: 'workHome',
			align: 'center',
		},
		{
			title: '描述',
			key: 'desc',
			dataIndex: 'desc',
			align: 'center',
		},
		{
			title: '创建人',
			key: 'createName',
			dataIndex: 'createName',
			align: 'center',
		},
		{
			title: '创建时间',
			key: 'createTime',
			dataIndex: 'createTime',
			align: 'center',
		},
		{
			title: '操作',
			key: 'active',
			align: 'center',
			width: 150,
			render: (text, record, index) => (
				<Space size={'small'}>
					<Button size="small" type="primary" onClick={() => openUpdateModel(record)}>编辑</Button>
					<Button size="small" type="primary" danger onClick={() => deleteGroup(record.id)}>删除</Button>
				</Space>
			),
		},
	]

	const [loading, setLoading] = useState<boolean>(false);
	const [datasource, setDatasource] = useState<ScriptGroupTableProp[]>([]);
	const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
	const [addVisible, setAddVisible] = useState<boolean>(false);
	const [updateVisible, setUpdateVisible] = useState<boolean>(false);
	const [currData, setCurrData] = useState<ScriptGroupTableProp | undefined>(undefined)
	const [openDrawer, setOpenDrawer] = useState<GroupOpenDrawerProp>({createVisible: false, updateVisible: false});

	const loadData = async () => {
		const list = await scriptGroupList({pId: 0})
		setDatasource(list);
	}

	const closeModel = async (types: "update" | "insert", data?: ScriptTreeProp) => {
		if (types === "insert") {
			await setOpenDrawer({createVisible: false, updateVisible: false, currGroup: undefined})
			if (data !== undefined) {
				await loadData();
				await insertNode(data);
			}
		}
		if (types === "update") {
			setOpenDrawer({createVisible: false, updateVisible: false, currGroup: undefined})
			if (data !== undefined) {
				loadData();
				updateNode(data);
			}
		}

	}

	const deleteGroup = async (id: number) => {
		Modal.confirm({
			title: '警告',
			icon: <ExclamationCircleFilled />,
			content: '确认删除当前分组？',
			okText: '删除',
			okType: 'danger',
			cancelText: '取消',
			onOk: async () => {
				await scriptGroupDelete([id].toString())
				await loadData();
				deleteNode(id)
				message.success('删除成功')
			},
			onCancel: () => {}
		});
	}

	const batchDeleteGroup = () => {
		Modal.confirm({
			title: '警告',
			icon: <ExclamationCircleFilled />,
			content: '确认删除当前选中的分组数据？',
			okText: '删除',
			okType: 'danger',
			cancelText: '取消',
			onOk: async () => {
				await scriptGroupDelete([selectedRowKeys].toString())
				await loadData();
				deleteNode(selectedRowKeys);
				setSelectedRowKeys([]);
				message.success('删除成功')
			},
			onCancel: () => {}
		});
	}

	const openUpdateModel = (data: ScriptGroupTableProp) => {
		debugger;
		setOpenDrawer({updateVisible: true, createVisible: false, currGroup: data})
	}

	useEffect(() => { loadData() }, [])

	return <div>
		<Space>
			<Button type='primary' onClick={() => setOpenDrawer({createVisible: true, updateVisible: false, currGroup: undefined})}>增加分组</Button>
			<Button type='primary' danger disabled={selectedRowKeys.length <= 0} onClick={batchDeleteGroup}>删除分组</Button>
		</Space>
		<Table
			bordered
			size={'small'}
			columns={columns}
			rowKey={row => row.id}
			style={{ marginTop: 10 }}
			dataSource={datasource}
			pagination={false}
			loading={loading}
			rowSelection={{
				type: 'checkbox',
				selectedRowKeys: selectedRowKeys,
				onChange: (selectedRowKeys: React.Key[]) => {
					setSelectedRowKeys([...(selectedRowKeys as number[])])
				}
			}}
		/>
		<GroupCreateDrawer
			visible={openDrawer.createVisible}
			close={(data) => closeModel("insert", data)}
		/>
		<GroupUpdateDrawer
			initData={openDrawer.currGroup!}
			visible={openDrawer.updateVisible}
			close={(data) => closeModel("update", data)}
		/>
	</div>
}


export default ScriptGroupTable;